<template>
    <base-breadcrumb :title="titleName">
      <a-card :bordered="false">
        <div class="table-operator">
          <a-button
            v-btnPermission="'pm_060_add_02'"
            type="primary"
            icon="plus"
            @click="handleAdd"
          >
            新增
          </a-button>
          <a-button
            v-btnPermission="'pm_060_del_04'"
            @click="handleDel">
            删除
          </a-button>
        </div>
        <div class="pub-table-select-count">
          <a-icon type="info-circle" theme="twoTone" />
          <span style="margin-right: 12px">共计：<span class="totalNum">{{total}}个</span> | 已选择<span class="totalNum">{{ids.length}}个</span></span>
        </div>
  
        <list-table
          ref="table"
          size="default"
          :row-key="record=>record.typeId"
          :columns="columns"
          :request="loadData"
          :alert="true"
          :isFixedRight="false"
          show-size-changer
          show-quick-jumper
          :row-selection="rowSelection"
          show-pagination="auto"
        >
          <span
            slot="serial"
            slot-scope="text, record, index"
          >{{ index + 1 }}</span>
          <span
            slot="action"
            slot-scope="text, record"
          >
            <MoreButton>
              <a
                v-btnPermission="'pm_060_loo_01'"
                @click="handleSub(record)"
              >查看</a>
              <a
                v-btnPermission="'pm_060_edi_03'"
                @click="handleEdit(record)"
              >编辑</a>
            </MoreButton>
          </span>
        </list-table>
  
        <add-unit
          ref="createModal"
          :visible="visible"
          :loading="confirmLoading"
          :model="mdl"
          @cancel="handleCancel"
          @ok="handleOk"
        />
      </a-card>
    </base-breadcrumb>
  </template>
  
  <script>
    import moment from 'moment'
    import { getContractUnitList, addContractUnit, editContractUnit, delContractUnit } from '@/api/project/contracting'
    import addUnit from './addUnit'
  
    const columns = [
      {
        title: '序号',
        scopedSlots: { customRender: 'serial' }
      },
      {
        title: '签约单位名称',
        dataIndex: 'name'
      },
      {
        title: '状态',
        dataIndex: 'enabledName',
      },
      {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      }
    ]
  
    const statusMap = {
      0: {
        status: 'default',
        text: '关闭'
      },
      1: {
        status: 'processing',
        text: '运行中'
      },
      2: {
        status: 'success',
        text: '已上线'
      },
      3: {
        status: 'error',
        text: '异常'
      }
    }
  
    export default {
      name:'a'+Date.now(),
      components: {
        addUnit,
      },
      data() {
        this.columns = columns
        return {
          titleName:'',
          // create model
          visible: false,
          confirmLoading: false,
          mdl: null,
          ids:[],
          total: 0,
          // 高级搜索 展开/关闭
          advanced: false,
          // 查询参数
          queryParam: {},
          // 加载数据方法 必须为 Promise 对象
          loadData: parameter => {
            const requestParameters = Object.assign({}, parameter, this.queryParam)
            return getContractUnitList(requestParameters)
              .then(res => {
                this.total = res.totalSize;
                return res
              })
          },
          selectedRowKeys: [],
          selectedRows: [],
          isEdit:false,
          cacheSelecRows: []
        }
      },
      filters: {
        statusFilter(type) {
          return statusMap[type].text
        },
        statusTypeFilter(type) {
          return statusMap[type].status
        }
      },
      computed: {
        rowSelection() {
          return {
            selectedRowKeys: this.selectedRowKeys,
            selectedRows: this.selectedRows,   // 当前行所有数据
            onChange: this.onSelectChange
          }
        }
      },
      methods: {
        searchData(){  // 搜索
          let _this = this;
          _this.$refs.table.refresh(true)
        },
        deletes(){},
        handleAdd() {
            this.mdl = { }
            this.confirmLoading = false
            this.visible = true
            this.isEdit = false
        },
        handleDel(){
          let that = this
          if(that.selectedRows.length == 0){
            that.$message.error('请先选择删除的项目类型！')
            return
          }
          that.$confirm({
            title: '删除',
            content: '确定删除项目类型吗？',
            onOk() {
              delContractUnit({ids:that.ids}).then(res=>{
                if(res.data == 200 || res.data.code == 200){
                  that.$message.success('删除成功！')
                  that.$refs.table.refresh(true)
                  that.selectedRows = []
                  that.selectedRowKeys = []
                }
              })
            },
            onCancel() {},
          });
  
        },
  
        handleEdit(record) {
          this.visible = true
          this.mdl = { ...record, enabledCode: record.status=='FALSE'?'0':'1'}
          this.isEdit = true
        },
        handleOk() {
          let that = this;
          const form = that.$refs.createModal.form
          form.validateFields((errors, values) => {
            if (!errors) {
              if ( that.isEdit == true) {
                // 修改
                that.confirmLoading = true
                editContractUnit({...values, id: that.mdl.id}).then(res=>{
                  that.confirmLoading = false
                  if(res.data.code==200){
                    that.visible = false
  
                    // 重置表单数据
                    form.resetFields()
                    // 刷新表格
                    that.$refs.table.refresh(true)
  
                    that.$message.success('修改成功！')
                  }else{
                    that.$message.error('修改失败！ ')
                    that.visible = false
                    form.resetFields()
  
                  }
  
                }).catch(()=>{
                  that.confirmLoading = false
                })
  
              } else {
                // 新增
                that.confirmLoading = true
                addContractUnit(values).then(res=>{
                  that.confirmLoading = false
                  if(res.data.code == 200){
                    that.visible = false
                    // 重置表单数据
                    form.resetFields()
                    // 刷新表格
                    that.$refs.table.refresh(true)
                    that.$message.success('新增成功！')
                  }else{
                    that.$message.error('新增失败！')
                    // 重置表单数据
                    form.resetFields()
                    that.visible = false
                  }
  
                }).catch(()=>{
                  that.confirmLoading = false
                })
  
              }
            }
          })
        },
        handleCancel() {
          this.visible = false
          const form = this.$refs.createModal.form
          form.resetFields() // 清理表单数据（可不做）
        },
        handleSub(record) {
            this.visible = true
            this.mdl = { ...record, disabled: true, enabledCode: record.status=='FALSE'?'0':'1' }
        },
        onSelectChange(selectedRowKeys, selectedRows) {
          // const arr2 =  this.setTableListTopNum(this.cacheSelecRows, selectedRowKeys, selectedRows, 'id')
          // this.cacheSelecRows= arr2;
          this.selectedRowKeys = selectedRowKeys
          this.selectedRows =  selectedRows
  
          let arr = []
          this.selectedRows.forEach(function(obj,i) {
            arr.push(obj.id)
          })
          this.ids = arr
        },
        toggleAdvanced() {
          this.advanced = !this.advanced
        },
        resetSearchForm() {
          this.queryParam = {
            date: moment(new Date())
          }
        }
      }
    }
  </script>
  
  
  